<template>
  <div class="index">
    <div class="formBox">
        <p class="item"><span class="name">地区名称 ：</span><input v-model="date.zone_name" class="slong" placeholder="请输入内容"></input></p>
        <p class="item"><span class="name">地区图片 ：</span>
            <img class="t2" :src="date.zone_logo">
            <input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png" name="">
        </p>
        <p class="item inputBox"><button @click="submit" class="submitInput">确定</button><button @click="empty" class="emptyInput">重置</button></p>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import { Post} from '@/config/api'

export default {
  name: 'index',
  data() {
    return {
        date:{
          zone_name:'',
          zone_logo:''
        }
    }
  },
  computed:{
    //检查表单
    VueFrom(){
      if(this.Input(this.date.zone_name)&&this.Input(this.date.zone_logo)){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    //提交
    async submit() {
      if(this.VueFrom&&this.Check()){
        let data={
            "zone_name":this.date.zone_name,
            "zone_logo":this.date.zone_logo
        }
        await Post('/goods/zone',this.$store.state.token,data).then(function(){
          alert('添加成功')
        }).catch(function(err){
          alert(err.response.data.message);
        })
        this.$router.push('/regionList')
        
      }else{
        alert('请正确填写信息')
      }

    },
    upImg(e){
/*        let that=this
        let reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
               that.date.zone_logo=this.result
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);*/
        let file = e.target.files[0]; //input 
        if( file.size > 1*1024*1024 ){  //用size属性判断文件大小不能超过1M
          alert( "你上传的文件太大了！" ) 
        }else{
          let that=this
          let reader = new FileReader(); 
          reader.readAsDataURL(file); 
          reader.onload = function(e){ 
            var res = this.result; 
            that.date.zone_logo=this.result 
          } 
        } 
    },
    //清空
    empty() {
      for(var key in this.date){
        this.date[key]=''
      }
    }
  }
}

</script>

